<template>
  <div>
    <!-- 头部信息 -->
    <el-header height="80px" style="padding: 10px;" >
        <!-- 工具/搜索栏 -->
        <div style="background: #F2F6FC; border-radius: 5px;">
            <div class="topbar">
                <div class="left-panel">
                    <el-button type="text" @click="back()"><i class="el-icon-back" style="font-size: 18px;"></i></el-button>
                    &nbsp;&nbsp;
                    配置分组:&nbsp;&nbsp;<span style="color:#6666CC;">{{groupName}}</span>
                </div>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <el-button type="success" icon="el-icon-plus" @click="saveBase()">创建配置文件</el-button>
                    </div>
                </div>
            </div>
        </div>      
    </el-header>

    <el-container>
      <el-aside width="250px" class="tree-box" style="padding-left: 10px; padding-right: 5px;">
          <el-card shadow="always" body-style="padding: 0px; min-height: 500px; max-height: 600px;">
              <div style="height: 45px; line-height: 45px; background-color: #F2F6FC;">
                  <span style="margin-left: 10px; font-szie: 16px; color: #606266;"><b>配置文件</b></span>
              </div>
              <el-input
                  placeholder="请输入分组关键字过滤"
                  v-model="filterText"
                  clearable>
              </el-input>
              <el-tree 
                  ref='Tree'
                  :props="{label: 'configName'}"
                  :data="configFiles" 
                  :highlight-current="true" 
                  node-key="id" 
                  @node-click="handleNodeClick" 
                  :filter-node-method="filterNode"
                  :current-node-key="searchForm.configId">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => updateBase(data)">
                            编辑
                        </el-button>
                    </span>
                </span>
              </el-tree>
          </el-card>
      </el-aside>

      <el-main style="padding-left: 5px; padding-right: 10px;">
        <el-card shadow="always" body-style="padding: 0px; min-height: 500px;">
          <el-container style="margin: 20px;">
            <el-main>
              <el-empty description="无数据" v-if="!hasConfig">
              </el-empty>
              <div v-else>
                  <el-descriptions title="" :column="2" size="large" direction="horizontal">
                      <template slot="title">
                        {{config.configName +'.'+ config.fileExtension}}
                      </template>
                      <template slot="extra">
                        <el-button type="success" icon="el-icon-upload" :disabled="config.status" @click="release()">发布</el-button>
                        <el-button style="background-color: #9400D3; color: #fff;" icon="el-icon-edit" @click="editable()">编辑</el-button>
                        <el-button style="background-color: #00CED1; color: #fff;" icon="el-icon-check" v-show="!readOnly" @click="update()">保存</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="deleteById()">删除</el-button>
                        <el-button type="info" icon="el-icon-s-order" @click="history()">发布历史</el-button>
                      </template>
                      <el-descriptions-item label="发布状态" label-class-name="label">
                          <el-tag size="small" type="success" v-if="config.status">已发布</el-tag>
                          <el-tag size="small" type="info" v-else>未发布</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item label="格式" label-class-name="label">{{ config.fileExtension }}</el-descriptions-item>
                      <el-descriptions-item label="MD5" label-class-name="label">{{ config.sign==null?'-':config.sign }}</el-descriptions-item>
                      <el-descriptions-item label="描述" label-class-name="label">{{ config.remark==null?'-':config.remark }}</el-descriptions-item>
                      <el-descriptions-item label="修改时间" label-class-name="label">{{ config.updateTime }}</el-descriptions-item>
                      <el-descriptions-item label="修改人" label-class-name="label">{{ config.updateUser }}</el-descriptions-item>
                      <el-descriptions-item label="发布时间" label-class-name="label">{{ config.releaseTime == null?'-':config.releaseTime }}</el-descriptions-item>
                      <el-descriptions-item label="发布人" label-class-name="label">{{ config.releaseUser == null?'-':config.releaseUser }}</el-descriptions-item>
                  </el-descriptions>
                  <code-mirror v-model="config.configContent" :mode="'yaml'" :readOnly="readOnly" :key="key"></code-mirror>
              </div>
            </el-main>
          </el-container>
        </el-card>
      </el-main>
    </el-container>

    <file-save-update ref="FileSaveUpdate" @success="success"></file-save-update>

  </div>
</template>

<script>
import CodeMirror from '../commons/codemirror.vue'
import FileSaveUpdate from './modules/file_save_update.vue'

export default {
    components: {
        CodeMirror,
        FileSaveUpdate
    },
    data() {
        return {
            // 查询表单
            searchForm: {
                configGroupId: null,
                configId: null,
                searchText: ''
            },
            // 同组下所有配置数组
            configFiles: [],
            hasConfig: false,
            filterText: '',
            config: {},
            readOnly: true,
            key: 1,
            groupName: ''
        }
    },
    created() {
       this.groupName = this.$route.query.groupName
    },
    mounted() {
        this.getList();
    },
    watch: {
        /**
         * 树数据过滤
         */
        filterText(val) {
            this.$refs.Tree.filter(val);
        },

        currentNodeKey() {

        }
    },
    methods: {
        async getList() {
            this.loading = true
            const configGroupId = this.$route.query.configGroupId
            let repsonse = await this.$API.configFile.getList(configGroupId)
            this.configFiles = repsonse.data
            this.loading = false
        },

        getConfigFile(configId) {
            this.$API.configFile.getById(configId).then(response => {
                this.config = response.data
            })
        },

        filterNode(value, data) {
            if (!value) return true;
            return data.configName.indexOf(value) !== -1;
        },

        handleNodeClick(data) {
            this.hasConfig = true
            this.getConfigFile(data.id)
        },

        saveBase() {
            const configGroupId = this.$route.query.configGroupId
            this.$nextTick(() => {
                this.$refs.FileSaveUpdate.open({'configGroupId': configGroupId, 'fileExtension': 'yaml'}) 
            })
        },

        updateBase(data) {
            this.$nextTick(() => {
                this.$refs.FileSaveUpdate.open(data) 
            })
        },

        success(id) {
            if (id != null && id != 'Undefined') {
                this.getConfigFile(id)                
            } else {
                this.getList()
            }
        },

        editable() {
            this.readOnly = false
            this.key = 2
        },

        back() {
            // this.$router.push({ path: '/client'})
            this.$router.back(-1)
        },

        history() {
            this.$router.push({ path: '/config/history', query: { configGroupId: this.config.configGroupId, configName: this.config.configName }})
        },

        /**
         * 提交表单
         */
        async update() {
            let dto = {
                'id': this.config.id,
                'configGroupId': this.config.configGroupId,
                'configContent': this.config.configContent
            }
            let response = await this.$API.configFile.update(dto)
            this.$message.success(response.message)
            this.getConfigFile(this.config.id)
            this.readOnly = true
            this.key = 1
        },

        async release() {
            let dto = {
                'id': this.config.id
            }
            let response = await this.$API.configFile.release(dto)
            this.$message.success(response.message)
            this.getConfigFile(this.config.id)
        },

        deleteById() {
            this.$confirm('确认删除配置文件?', '操作提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 删除主线配置
                this.$API.configFile.deleteById(this.config.id).then(response => {
                    this.getList()
                    this.hasConfig = false
                    this.$message.success(response.message)
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.el-main {
    width: 100%;
    height: 100%;
    padding: 0;
}
.topbar {
    height: 50px; 
    display: flex;
    justify-content:space-between;
    margin-bottom: 0px;

    .left-panel {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }
    .right-panel {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

    .right-panel-search {display: flex;align-items: center;}

    .right-panel-search > * + * {margin-left:10px;}
}


.tree-box >>> .el-tree-node {
    line-height: 45px;
}
.tree-box >>> .el-tree-node__content{
    height: 45px;
    line-height: 45px;
}

</style>

<style lang="scss">
/* 点击树结构项的选中颜色 */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color:  hsl(199, 31%, 55%);
   color: #ebeef5;
}



body > .el-container {
    margin-bottom: 40px;
    height: 100%;
}

body html{
    height: 100%;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 2px;
}
</style>
